<template>
  <div>
    <button @click="Show">显示|隐藏</button>

    <!--    想谁有动画效果，就用transition包裹起来  appear 直接来就有动画-->
    <transition-group name="hello" :appear="true">
      <h1 v-show="isShow" key="1">你好啊</h1>
      <h1 v-show="isShow" key="2">重庆啊</h1>
    </transition-group>


  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Test",
  data(){
    return{
      isShow:true,
    }
  },
  methods:{
    Show(){
      this.isShow = !this.isShow
    },

  }

}
</script>

<style scoped>
h1{
  background-color: #de6b38;
  /*!*完成整个的过渡效果*!*/
  /*transition: 0.5s linear;*/
}
/*!*进入的动画*!  hello-enter-active*/
/*进入的起点    离开的终点*/
.hello-enter,.hello-leave-to{
    transform: translateX(-100%);
}
.hello-leave-active,.hello-enter-active{
  /*完成整个的过渡效果*/
  transition: 0.5s linear;
}
/*进入的终点*/ /*离开的起点*/
.hello-enter-to,.hello-leave{
    transform: translateX(0);
}




/*离开的动画   reverse反转效果 hello-leave-active*/

.hello-leave-active{
  animation: atguigu 1s reverse;
}


</style>